今天的參考
https://www.youtube.com/watch?v=V_G1WzPjb4o&list=PL5e68lK9hEzd-ZM4Km6xUia-mxQp52G6U&index=26
看了一下程式碼,好像有用到框架之類的東西,(框架<<我都當作是別人寫好的東西,然後可以用網址之類的東西引入,但這種解釋絕對不專業就是了,因為我也並非相關專業人士XD)
應該確定是用框架 ID 有 container 、 card 等熟悉的字樣 (但好像就排版相關的)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>測試</title>
<link href="C1.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="percent" style="--clr:#18FFF2">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
</div>
</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #171819;
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
}
.container .card{
position: relative;
width: 220px;
height: 250px;
background: #252627;
display: flex;
justify-content: center;
align-items: center;
}
.container .card .percent svg{
position: relative;
width: 150px;
height: 150px;
/*background: #54D5F3; /*測試用的底色*/
}
.container .card .percent svg circle{
width: 100%;
height: 100%;
fill: transparent;
stroke-width: 2;
stroke: #1D1D1F;
transform: translate(5px, 5px);
}
.container .card .percent svg circle:nth-child(2){ /*circle標籤 有2個,所以填2的樣子*/
stroke: var(--clr);
stroke-dasharray: 200;
stroke-dashoffset: 200; /*讓"亮色圈圈" 只出現一些部分*/
}
成果
今天先這樣,明天繼續,謝謝